<template>
  <div class="navbar">
    <img src="@/assets/logo.png" class="logo" />
    <div class="name">森罗万象</div>
    <div class="loginArea">
      <div v-if="isLogin" class="loginName">{{ accountName }}</div>
      <!-- <div v-if="!isLogin" class="loginName">登录</div> -->
    </div>
  </div>
</template>

<script>
export default {
  name: "NavbarHomepage",
  props: {
    isLogin: Boolean,
  },
  data: function () {
    let account = sessionStorage.getItem("account");
    if (account == null) {
      this.$router.push("/");
    }
    return {
      accountName: account,
    };
  },
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.navbar {
  height: 60px;
  background-color: #1e406f;
  position: relative;
}
.logo {
  top: 10px;
  height: 40px;
  left: 30px;
  position: absolute;
}
.name {
  top: 15px;
  font-size: 24px;
  color: white;
  left: 100px;
  position: absolute;
}
.loginArea {
  top: 18px;
  font-size: 20px;
  right: 40px;
  position: absolute;
}
.loginName {
  color: whitesmoke;
}
</style>
